<template>
  <view class="flex-col page">
    <view class="flex-col relative section">
      <view class="mt-30 flex-row items-center">
        <image
          class="image_4"
          src="https://joyballet.oss-cn-beijing.aliyuncs.com/eyemanager/wechat/doctor_body.png"
        />
        <view class="ml-10 flex-col">
          <text class="text_2">蒋医生-同仁眼科专家</text>
          <view class="flex-row items-center mt-11">
            <text class="text_3">AI数字分身认证</text>
            <view class="ml-6 section_2"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="mt-24 flex-col group_2">
      <view class="flex-row group_3">
        <view class="flex-col justify-start items-start flex-1 self-center report-wrapper">
          <view class="report-content">
            <rich-text class="text_4" :nodes="aiResponse"></rich-text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      aiResponse: '{"output":"根据您的视力检查报告，您的双眼协调性、立体视觉和部分调节功能正常，但存在**调节幅度不足**、**调节灵敏度低下**和**聚散功能异常**等问题。这些问题可能导致用眼疲劳、近距离工作困难、视物模糊等症状。以下是针对性的建议：\n\n---\n\n### **一、日常用眼保护建议**\n1. **控制用眼时间**  \n   - 每近距离用眼（看书、电脑、手机）**30分钟**，闭眼休息或远眺**5分钟**，避免调节疲劳。\n   - 使用电子设备时开启**护眼模式**，降低屏幕蓝光刺激。\n\n2. **调整用眼环境**  \n   - 保持阅读距离**≥30cm**，电脑屏幕距离**≥50cm**。\n   - 室内光线需均匀明亮，避免在暗处用眼。\n\n3. **热敷与按摩**  \n   - 每天早晚用**温热毛巾**敷眼5分钟，促进眼部血液循环。\n   - 轻柔按摩眼周穴位（如太阳穴、攒竹穴），缓解疲劳。\n\n---\n\n### **二、针对性功能改善建议**\n1. **调节功能训练**  \n   - **翻转拍训练**（推荐±2.00D镜片）：  \n     - 单眼训练：右眼4.5分钟，左眼3分钟/天（从低难度开始）。  \n     - 双眼训练：每天10分钟，逐步增加速度。  \n   - **字母表训练**：交替看远（5米）和看近（30cm）的视力表，每天2次，每次5分钟。\n\n2. **聚散功能训练**  \n   - **铅笔推进法**：手持铅笔从远到近移动，保持双眼聚焦笔尖直至重影出现，每天练习5分钟。  \n   - **棱镜训练**：在专业人员指导下使用棱镜改善集合和散开范围。\n\n---\n\n### **三、专业干预建议**\n1. **验光配镜**  \n   - 若日常有视疲劳症状，可考虑验配**抗疲劳镜片**或**渐进多焦点镜片**，减轻调节负担。  \n   - 检查是否存在未矫正的屈光问题（如隐性远视），及时调整度数。\n\n2. **视觉训练疗程**  \n   - 在视光师指导下进行**系统化调节和聚散训练**，每周2-3次，持续6-8周。  \n   - 使用数字化训练工具（如VTS4、HTS）提升灵敏度。\n\n3. **定期复查**  \n   - 每3-6个月复查**调节幅度（AMP）**和**聚散灵敏度**，跟踪功能改善情况。\n\n---\n\n### **四、饮食与生活习惯**\n1. **补充营养素**  \n   - 多吃富含叶黄素的食物（菠菜、玉米、蛋黄）、维生素A（胡萝卜、蓝莓）、Omega-3（深海鱼）。  \n   - 可适当补充**叶黄素片**或**复合维生素**。\n\n2. **增强体质**  \n   - 每天户外活动**≥1小时**，阳光中的紫外线有助于调节眼轴生长。  \n   - 规律作息，避免熬夜（睡眠不足会加重调节疲劳）。\n\n---\n\n### **五、需警惕的风险**\n若出现以下情况，建议立即就医：  \n- 持续性头痛、眼胀、恶心（可能为调节痉挛或青光眼前兆）。  \n- 突然视物重影、视力下降（需排除神经或眼底病变）。\n\n---\n\n通过以上措施，您的调节功能和用眼舒适度会逐步改善。重点在于**坚持训练**和**科学用眼习惯**，必要时结合专业干预。如果症状持续或加重，请及时咨询眼科医生或视光师！"}',
      currentTime: ''
    };
  },
  onShow() {
    console.log('aiResponse onShow', this.aiResponse)
    // this.aiResponse = this.formatResponse(this.aiResponse);
  },
  onLoad(options) {
    if (options.aiResponse) {
      this.aiResponse = decodeURIComponent(options.aiResponse)
      console.log('aiResponse onLoad', this.aiResponse)
      this.aiResponse = this.formatResponse(this.aiResponse);
    }
  },
  methods: {
    formatResponse(text) {
      try {
        // 删除 JSON 格式字符
        text = text.replace(/^{"output":"/, '').replace(/"}$/, '');
        // 处理换行符
        text = text.replace(/\\n/g, '\n');
        
        const formattedContent = text
          .split('\n')
          .map(line => {
            // 处理一级标题
            if (line.startsWith('### ')) {
              return `<p style="font-size: 36rpx; font-weight: bold; color: #2c3e50; margin: 40rpx 0 20rpx 0; padding-left: 20rpx; border-left: 8rpx solid #43cf7c;">${line.replace('### ', '')}</p>`;
            }
            // 处理二级标题和加粗文本
            line = line.replace(/\*\*(.*?)\*\*/g, '<strong style="font-size: 32rpx; font-weight: 600; color: #34495e; margin: 30rpx 0 16rpx 0;">$1</strong>');
            // 处理列表项
            if (line.trim().startsWith('-')) {
              return `<p style="padding-left: 40rpx; margin: 16rpx 0; color: #666; font-size: 28rpx; line-height: 1.6;">${line}</p>`;
            }
            if (line.trim().match(/^\d+\./)) {
              return `<p style="padding-left: 20rpx; margin: 16rpx 0; color: #333; font-size: 28rpx; line-height: 1.6;">${line}</p>`;
            }
            // 处理斜体文本
            line = line.replace(/\*(.*?)\*/g, '<i style="color: #666; font-style: italic;">$1</i>');
            return `<p style="margin: 16rpx 0; font-size: 28rpx; line-height: 1.6;">${line}</p>`;
          })
          .join('');
          return formattedContent;
      } catch (e) {
        console.error('格式化响应出错：', e);
        return text;
      }
    },
    uploadNewReport() {
      uni.navigateBack()
    }
  }
};
</script>

<style scoped lang="css">
  .title-1 {
    font-size: 36rpx;
    font-weight: bold;
    color: #2c3e50;
    margin: 40rpx 0 20rpx 0;
    padding-left: 20rpx;
    border-left: 8rpx solid #43cf7c;
  }

  .title-2 {
    font-size: 32rpx;
    font-weight: 600;
    color: #34495e;
    margin: 30rpx 0 16rpx 0;
  }

  .list-item {
    padding-left: 40rpx;
    margin: 16rpx 0;
    color: #666;
    font-size: 28rpx;
    line-height: 1.6;
  }

  .number-item {
    padding-left: 20rpx;
    margin: 16rpx 0;
    color: #333;
    font-size: 28rpx;
    line-height: 1.6;
  }
  .ml-5 {
    margin-left: 10rpx;
  }
  .mt-11 {
    margin-top: 22rpx;
  }
  .ml-17 {
    margin-left: 34rpx;
  }
  .page {
    background-color: #f3f7fd;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
  }
  .section {
    padding: 36rpx 36rpx 66rpx;
    background-color: #ffffff;
    border-radius: 0rpx 0rpx 48rpx 48rpx;
    box-shadow: 0rpx 4rpx 24rpx #6b86b340;
  }
  .group {
    padding-left: 20rpx;
  }
  .text {
    color: #141023;
    font-size: 30rpx;
    font-family: HarmonyOSSansSC;
    font-weight: 300;
    line-height: 22.62rpx;
  }
  .image {
    width: 34rpx;
    height: 22rpx;
  }
  .image_2 {
    width: 30rpx;
    height: 22rpx;
  }
  .image_3 {
    width: 48rpx;
    height: 22.66rpx;
  }
  .image_4 {
    border-radius: 24rpx;
    width: 88rpx;
    height: 88rpx;
  }
  .text_2 {
    color: #0e1012;
    font-size: 28rpx;
    font-family: NunitoSans;
    font-weight: 700;
    line-height: 26.76rpx;
  }
  .text_3 {
    color: #43cf7c;
    font-size: 24rpx;
    font-family: NunitoSans;
    line-height: 22.44rpx;
  }
  .section_2 {
    background-color: #27ae60;
    border-radius: 50%;
    width: 14rpx;
    height: 14rpx;
  }
  .group_2 {
    padding: 0 36rpx 28rpx;
  }
  .group_3 {
    padding: 28rpx 4rpx 50rpx;
  }
  .image_5 {
    border-radius: 24rpx;
    width: 80rpx;
    height: 80rpx;
  }
  .text-wrapper {
    margin-right: 30rpx;
    padding: 36rpx;
    background-color: #faf0db;
    border-radius: 0rpx 32rpx 32rpx 32rpx;
    min-height: 80rpx;
    height: auto;
    max-width: 580rpx;
  }
  .text_4 {
    margin-left: 16rpx;
    color: #193469;
    font-size: 28rpx;
    font-family: Poppins;
    line-height: 48rpx;
    word-break: break-all;
    white-space: pre-wrap;
  }
  .text-wrapper_2 {
    margin-left: 14rpx;
    margin-right: 26rpx;
    padding: 24rpx 0 160rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
  }
  .text_5 {
    margin-left: 32rpx;
    color: #000000;
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    font-weight: 300;
    line-height: 40rpx;
  }
  .group_4 {
    margin-top: 728rpx;
  }
  .text-wrapper_3 {
    margin-left: 54rpx;
    padding: 28rpx 0 24rpx;
    background-color: #e5e5e5;
    border-radius: 40rpx;
    width: 514rpx;
    height: 76rpx;
  }
  .text_6 {
    color: #000000;
    font-size: 24rpx;
    font-family: AlibabaPuHuiTi;
    font-weight: 300;
    line-height: 21.94rpx;
  }
  .image_7 {
    margin-left: -568rpx;
    width: 64rpx;
    height: 48rpx;
  }
  .image_6 {
    margin-left: 522rpx;
    border-radius: 20.26rpx;
    width: 86rpx;
    height: 76rpx;
  }
  .report-wrapper {
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 90%;
  }

  .report-header {
    background-color: #f8f9fa;
    padding: 24rpx;
    border-bottom: 1rpx solid #eaeaea;
  }

  .report-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .report-time {
    font-size: 24rpx;
    color: #666;
    margin-left: 20rpx;
  }

  .report-content {
    padding: 30rpx;
    background-color: #ffffff;
  }

  .text_4 {
    color: #333333;
    font-size: 28rpx;
    line-height: 48rpx;
    white-space: pre-wrap;
  }

  .highlight-title {
    display: block;
    color: #2c3e50;
    font-size: 32rpx;
    font-weight: bold;
    margin: 20rpx 0;
  }

  .highlight-point {
    display: block;
    color: #34495e;
    font-weight: 600;
    margin: 10rpx 0;
  }

  .report-content {
    padding: 30rpx;
    background-color: #ffffff;
    line-height: 1.6;
  }
</style>